<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="/static/css/login.css">
    <script src="{{ url_for('static', filename="js/common.js") }}"></script>

</head>

<body>
    <div class="form-wrapper">
        <div class="form-side">
            <form class="register-form">
                <div class="login-welcome-row">
                    <h1>小橙刷考账号注册 &#x1F44F;</h1>
                </div>
                <div class="text-field">
                    <label for="email">邮箱号:
                        <input type="email" id="email" name="email" autocomplete="off" placeholder="xx.@xx.com"
                            required>
                    </label>
                </div>
                <div class="text-field">
                    <label for="password">密码:
                        <input id="password" type="password" name="password" placeholder="至少6个字符一个字母和一个数字" title="至少6个字符一个字母和一个数字"
                            pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$" required>
                    </label>
                </div>
                <div class="text-field">
                    <label for="confirm-password">重新输入密码:
                        <input id="confirm-password" type="password" name="password" placeholder="请再次输入密码"
                            pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$" required>
                    </label>
                </div>
                <div class="text-field">
                    <label for="captcha">请输入验证码:
                        <div class="captcha-container">
                            <input id="captcha" type="text" name="captcha" placeholder="验证码" required>
                            <button type="button" id="sendCodeBtn" class="send-code-btn">发送验证码</button>
                        </div>
                    </label>
                </div>
                <button class="register-btn" id = "registerBtn" type="submit">
                    注册
                </button>
                <div class="my-form__actions">
                    <div class="my-form__row">
                        <span>忘记密码？</span>
                        <a href="#" title="Reset Password">
                            重置密码
                        </a>
                    </div>
                    <div class="my-form__signup">
                        <h3> 已有账号？</h3>
                        <a href="/auth/login" title="Login">
                            去登录
                        </a>
                    </div>
                </div>
            </form>
        </div>
        <div class="info-side">
            <img src="../static/resource/login/mock.png" alt="Mock" class="mockup" />
        </div>
    </div>
    <script src="/static/js/jquery-3.7.1.js"></script>
    <script src="/static/js/register.js" type="module"></script>
</body>

</html>